import React, { useState, useEffect } from 'react';
import { Select, Input, Button, Tag, Space, Table } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import * as service from '../../../../api/salary.js'
import { useNavigate } from 'react-router-dom';
import '../Manage/Manage.scss'
const { Search } = Input;
function Manage(props: any) {
    var navigate = useNavigate()
    var [managelist, setManagelist] = useState([])
    useEffect(() => {
        service.metting_managelist({}).then((res) => {
            console.log(res);
            setManagelist(res.data)
        })
    }, [])
    const columns: any = [
        {
            title: '会议室图片',
            key: 'pic',
            render: (_: any, item: any) => <img src={item.pic} style={{ width: 180, height: 110 }} />
        },
        {
            title: '会议室名称',
            dataIndex: 'room_name',
            key: 'room_name',
        },
        {
            title: '会议室状态',
            dataIndex: 'room_state',
            key: 'room_state',
        },
        {
            title: '最多容纳人数',
            dataIndex: 'max_num',
            key: 'max_num',
        },
        {
            title: '所在工作地点',
            dataIndex: 'local',
            key: 'local',
        },
        {
            title: '所在工作城市',
            dataIndex: 'city',
            key: 'city',
        },
        {
            title: '设备',
            dataIndex: 'pros',
            key: 'pros',
        },
        {
            title: '是否允许预定',
            dataIndex: 'isOk',
            key: 'isOk',
        },
        {
            title: '操作',
            key: 'tags',
            dataIndex: 'tags',
            render: (_: any, record: any) => (
                <Space size="middle">
                    <a onClick={() => { delMetting(record.id) }}>删除</a>
                </Space>
            ),
        },
    ];
    const data = managelist
    var handleChange = (value: any) => { //选择会议室状态，是否空闲
        // console.log(value);
        switch (value) {
            case '空闲':
                service.metting_empty({ room_state: "空闲" }).then((res) => {
                    // console.log(res);
                    setManagelist(res.data)
                })
                break;
            case '使用中':
                service.metting_useing({ room_state: '使用中' }).then((res) => {
                    // console.log(res);
                    setManagelist(res.data)
                })
                break;
        }
    }
    var onSearch = (e: any) => {
        console.log(e);
        service.metting_keywords({ room_name: e }).then((res) => {
            console.log(res);
            setManagelist(res.data)
        })
    }
    var addMetting = () => { //跳转到添加会议室
        navigate('/index/conference/manage/addmetting')
    }
    var delMetting = async (id: any) => { //删除单个会议室
        var res = await service.delete_metting({ id })
        service.metting_managelist({}).then((res) => {
            setManagelist(res.data)
        })  
    }
    return (
        <div className='manage'>
            <div className='manage-one'>
                <div className='Conference-title-left'></div>
                <h4 className='Conference-title'>会议室管理</h4>
            </div>
            <div className='manage-two'>
                <div className='Conference-two-box'>
                    <span>会议室状态</span>
                    <Select
                        placeholder="请选择"
                        style={{ width: 220 }}
                        onChange={(value) => { handleChange(value) }}
                        options={[
                            { value: '空闲', label: '空闲(9)' },
                            { value: '使用中', label: '使用中(13)' }
                        ]}
                    />
                    <Search placeholder="请输入关键字" onSearch={(e) => { onSearch(e) }} style={{ width: 320 }} />
                </div>
                <Button type="primary" icon={<PlusOutlined />} style={{ height: 40 }} onClick={() => { addMetting() }}>新增会议室</Button>
            </div>
            <Table columns={columns} dataSource={data} className='manage-three' />
        </div>
    );
}

export default Manage;